import React from "react";
import { Card, Table ,Modal ,Button,message} from "antd";
// import axios from 'axios'
import axios from "@/axios/index";
import Utils from "../../utils/utils";
export default class basicTable extends React.Component {
  constructor() {
    super();
    this.state = {
      dataSource2: []
    };
  }

  params={
    page:1
  }

  componentDidMount() {
    //初始化调用mock数据
    this.request();
  }

  // //动态获取mock数据
  // result=()=>{
  //     let baseUrl="https://www.easy-mock.com/mock/5c09db7057b1777d53e590c6/react"
  //     axios.get(baseUrl+"/table/list").then((res)=>{
  //         console.log(JSON.stringify(res))
  //         if(res.status=='200' && res.data.code==0){
  //             this.setState({
  //                 dataSource2:res.data.result
  //             })
  //         }
  //     })
  // }

  //动态获取mock数据
  request = () => {
    let _this = this
    axios
      .ajax({
        url: "/table/list",
        data: {
          params: {
            page: this.params.page
          }
        }
      })
      .then(res => {
        if (res.code == "0") {
          //解决报错没有key
          res.result.list.map((item,index)=>{
            item.key = index
          })
          this.setState({
            dataSource2: res.result.list,
            selectedRowKeys:[], //哪一行
            selectedRows:null, //哪些行
            pagination:Utils.pagination(res,(current)=>{
              _this.params.page =current;
              this.request();

            }) //分页  
          });
        }
      });
  };

  //点击行触发的方法
  onRowClick = (record,index) =>{
    let selectKey =[index];
    Modal.info({
      title:'msg',
      content:`用户名:${record.userName},ID:${record.id}`
    })
    this.setState({
      selectedRowKeys:selectKey, //选中行的索引
      selectedItem:record //选中行的对象
    })
  }

  //点击删除按钮
  handleDelete=()=>{
    let rows = this.state.selectedRows //取出选中哪些行
    let ids =[]
    rows.map((item)=>{
      ids.push(item.id)
    })
    Modal.confirm({
      title:"提示信息",
      content:`您要删除这几条数据么?${ids.join(',')}`,
      onOk:()=>{
        message.success("删除成功")
        this.request();//调用初始化刷新页面
      }
    })
  }

  render() {
    // 表头
    const columns = [
      {
        title: "ID",
        dataIndex: "id"
      },
      {
        title: "用户名",
        dataIndex: "userName"
      },
      {
        title: "性别",
        dataIndex: "sex",
        render(sex) {
          return sex == 1 ? "男" : "女";
        }
      },
      {
        title: "状态",
        dataIndex: "state",
        render(state) {
          let config ={
            "1":"在职",
            "2":"离职",
            "3":"待业",
            "4":"没上过班",
          }
          return config[state];
        }
      },
      {
        title: "爱好",
        dataIndex: "interest",
        render(interest) {
          let config ={
            "1":"踢球",
            "2":"篮球",
            "3":"羽毛球",
            "4":"溜溜球"
          }
          return config[interest];
        }
      },
      {
        title: "生日",
        dataIndex: "birthday"
      },
      {
        title: "地址",
        dataIndex: "address"
      },
      {
        title: "早起时间",
        dataIndex: "time"
      }
    ];
    
    //点击单选表格
    const selectedRowKeys = this.state.selectedRowKeys;
    const rowSelection ={
      type:"radio",
      selectedRowKeys, //官方api 指定选中key数组 和 onChange配合使用
      onChange:(selectedRowKeys,selectedRows)=>{
        this.setState({
          selectedRowKeys, //哪一行
          selectedRows //哪些行
        })
      }
    }
    //点击多选表格
    const rowCheckSelection ={
      type:"checkbox",
      selectedRowKeys, //官方api 指定选中key数组 和 onChange配合使用
      onChange:(selectedRowKeys,selectedRows)=>{
        this.setState({
          selectedRowKeys, //哪一行
          selectedRows //哪些行
        })
      }
    }


    // 渲染页面
    return (
      <div>
        <Card title="动态获取表格">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={false}
          />
        </Card>

        <Card title="单选">
          <Table
            bordered
            rowSelection={rowSelection} //设置单选多选
            onRow={(record,index)=>{
              return {
                //点击行
                onClick:()=>{
                  this.onRowClick(record,index)
                } 
              }
            }}
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={false}
          />
        </Card>

        <Card title="多选">
          <div><Button type="primary" onClick={this.handleDelete}>删除</Button></div>
          <Table
            bordered
            rowSelection={rowCheckSelection} //设置单选多选
            onRow={(record,index)=>{
              return {
                //点击行
                onClick:()=>{
                  this.onRowClick(record,index)
                } 
              }
            }}
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={false}
          />
        </Card>

        <Card title="分页">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={this.state.pagination} 
          />
        </Card>
      </div>
    );
  }
}
